<template>
    <div class="m-25 mt-65">
        <div class="normal-box-mod">
            <div class="normal-box-hd clearfix">
                <div class="normal-box-title">
                    <div class="decorate-square"></div>
                    <h2>设备管理</h2>
                </div>
            </div>
            <div class="normal-box-bd">
                <div class="normal-list-page-mod">
                    <div class="normal-list-page-hd clearfix">
                        <Button-group>
                          <Button custom-icon="iconfont icon-shanchusekuai" size="small" type="error" @click="batchDel">
                            删除
                          </Button>
                          <Button custom-icon="iconfont icon-fangkuai2" size="small" type="primary" @click="showCreateModal">
                            新建
                          </Button>
                        </Button-group>
                    </div>
                    <div class="normal-list-page-bd">
                        <Table border :loading="list.loading" :columns="list.columns" :data="list.tableData" @on-selection-change="selectionChange"></Table>
                    </div>
                    <div class="normal-list-page-ft clearfix">
                        <Page class="fr" :total="queryData.totalRecord" :page-size="queryData.pageSize" :current="queryData.pageNum" @on-change="changePage" @on-page-size-change="onPageSizeChange" show-sizer></Page>
                    </div>
                </div>

                <!--新建&修改-->
                <Modal v-model="modal.iotDevice.isShow" :loading="modal.iotDevice.loading" :mask-closable="false" :title="modal.iotDevice.title" @on-ok="postData">
                    <Form ref="systemFrom" :model="modal.iotDevice.formData" :rules="modal.iotDevice.rules" :label-width="120">
                        <FormItem label="中移动ID"  prop="onenetid">
                            <Input placeholder="请输入中移动ID" v-model="modal.iotDevice.formData.onenetid" style="width:300px;"/>
                        </FormItem>
                        <FormItem label="私有、公开"  prop="ispublic">
                            <Input placeholder="请输入私有、公开" v-model="modal.iotDevice.formData.ispublic" style="width:300px;"/>
                        </FormItem>
                        <FormItem label="所属产品"  prop="productid">
                            <Input placeholder="请输入所属产品" v-model="modal.iotDevice.formData.productid" style="width:300px;"/>
                        </FormItem>
                        <FormItem label="设备名"  prop="deviceName">
                            <Input placeholder="请输入设备名" v-model="modal.iotDevice.formData.deviceName" style="width:300px;"/>
                        </FormItem>
                        <FormItem label="鉴权信息"  prop="authInfo">
                            <Input placeholder="请输入鉴权信息" v-model="modal.iotDevice.formData.authInfo" style="width:300px;"/>
                        </FormItem>
                        <FormItem label="激活码"  prop="activeCode">
                            <Input placeholder="请输入激活码" v-model="modal.iotDevice.formData.activeCode" style="width:300px;"/>
                        </FormItem>
                        <FormItem label="心跳间隔"  prop="intervalTime">
                            <Input placeholder="请输入心跳间隔" v-model="modal.iotDevice.formData.intervalTime" style="width:300px;"/>
                        </FormItem>
                        <FormItem label="设备图标"  prop="icon">
                            <Input placeholder="请输入设备图标" v-model="modal.iotDevice.formData.icon" style="width:300px;"/>
                        </FormItem>
                        <FormItem label="设备描述"  prop="description">
                            <Input placeholder="请输入设备描述" v-model="modal.iotDevice.formData.description" style="width:300px;"/>
                        </FormItem>
                        <FormItem label="产品品类"  prop="ptype">
                            <Input placeholder="请输入产品品类" v-model="modal.iotDevice.formData.ptype" style="width:300px;"/>
                        </FormItem>
                        <FormItem label="设备标签"  prop="tags">
                            <Input placeholder="请输入设备标签" v-model="modal.iotDevice.formData.tags" style="width:300px;"/>
                        </FormItem>
                        <FormItem label="位置"  prop="pos">
                            <Input placeholder="请输入位置" v-model="modal.iotDevice.formData.pos" style="width:300px;"/>
                        </FormItem>
                        <FormItem label="协议"  prop="protocol">
                            <Input placeholder="请输入协议" v-model="modal.iotDevice.formData.protocol" style="width:300px;"/>
                        </FormItem>
                        <FormItem label="url"  prop="url">
                            <Input placeholder="url" v-model="modal.iotDevice.formData.url" style="width:300px;"/>
                        </FormItem>
                        <FormItem label="设备APIkey"  prop="apikey">
                            <Input placeholder="请输入设备APIkey" v-model="modal.iotDevice.formData.apikey" style="width:300px;"/>
                        </FormItem>
                        <FormItem label="创建时间"  prop="crtTime">
                            <Input placeholder="请输入创建时间" v-model="modal.iotDevice.formData.crtTime" style="width:300px;"/>
                        </FormItem>
                        <FormItem label="更新时间"  prop="updTime">
                            <Input placeholder="请输入更新时间" v-model="modal.iotDevice.formData.updTime" style="width:300px;"/>
                        </FormItem>
                    </Form>
                </Modal>
            </div>
        </div>
    </div>
</template>
<script>
    import IotDeviceApi from "@/api/onenet/iotDevice.js";
    import moment from "moment";
    import { Message } from "iview";

    export default {
        name: "iotDevice",
        data() {
            return {
                // 弹出层数据
                modal: {
                    iotDevice: {
                        isShow: false,
                        loading: true,
                        type: "create", // create 新建，update 修改
                        title: "新建",
                        // rules: {
                        //     name: [
                        //         {
                        //             required: true,
                        //             message: "请填写系统名称",
                        //             trigger: "blur"
                        //         }
                        //     ],
                        //     url: [
                        //         {
                        //             required: true,
                        //             message: "请填写URL",
                        //             trigger: "blur"
                        //         }
                        //     ]
                        // },
                        formData: {}
                    }
                },
                // 列表
                list: {
                    loading: false,
                    selections: [],
                    // 列表展示数据
                    tableData: [],
                    // 表格表头
                    columns: [
                        {
                            type: "selection",
                            minWidth: 60,
                            align: "center"
                        },
                        /** 开始自动生成 */
                        {
                            title: "设备ID",
                            key: "id",
                            minWidth: 100,
                        },
                        {
                            title: "中移动ID",
                            key: "onenetid",
                            minWidth: 100,
                        },
                        {
                            title: "私有、公开",
                            key: "ispublic",
                            minWidth: 100,
                        },
                        {
                            title: "所属产品",
                            key: "productid",
                            minWidth: 100,
                        },
                        {
                            title: "设备名",
                            key: "deviceName",
                            minWidth: 100,
                        },
                        {
                            title: "鉴权信息",
                            key: "authInfo",
                            minWidth: 100,
                        },
                        {
                            title: "激活码",
                            key: "activeCode",
                            minWidth: 100,
                        },
                        {
                            title: "心跳间隔",
                            key: "intervalTime",
                            minWidth: 100,
                        },
                        {
                            title: "设备图标",
                            key: "icon",
                            minWidth: 100,
                        },
                        {
                            title: "设备描述",
                            key: "description",
                            minWidth: 100,
                        },
                        {
                            title: "产品品类",
                            key: "ptype",
                            minWidth: 100,
                        },
                        {
                            title: "设备标签",
                            key: "tags",
                            minWidth: 100,
                        },
                        {
                            title: "位置",
                            key: "pos",
                            minWidth: 100,
                        },
                        {
                            title: "协议",
                            key: "protocol",
                            minWidth: 100,
                        },
                        {
                            title: "url",
                            key: "url",
                            minWidth: 100,
                        },
                        {
                            title: "设备APIkey",
                            key: "apikey",
                            minWidth: 100,
                        },
                        {
                            title: "创建时间",
                            key: "crtTime",
                            minWidth: 100,
                            render: (h, params) => {
                                let formatString = "YYYY-MM-DD HH:mm:ss";
                                return moment.unix(params.row.crtTime / 1000).format(formatString);
                            }
                        },
                        {
                            title: "更新时间",
                            key: "updTime",
                            minWidth: 100,
                            render: (h, params) => {
                                let formatString = "YYYY-MM-DD HH:mm:ss";
                                return moment.unix(params.row.updTime / 1000).format(formatString);
                            }
                        },
                        /** 自动生成结束 */
                        {
                            title: "操作",
                                    align: "center",
                                minWidth: 130,
                                render: (h, params) => {
                            return h("div", { class: "action-group" }, [
                              h(
                                'Tooltip',
                                {
                                  props: {
                                    placement: 'left',
                                    content: '编辑'
                                  },
                                  style: {
                                    cursor: 'pointer'
                                  }
                                },
                                [
                                  h(
                                    'Button',
                                    {
                                      props: {
                                        type: 'primary',
                                        size: 'small'
                                      },
                                      style: {
                                        marginRight: '5px',
                                        padding: '1px 2px'
                                      },
                                      on: {
                                        click: () => {
                                          this.showUpdateModal(params.row.id)
                                        }
                                      }
                                    },
                                    [
                                      h('Icon', {
                                        props: {
                                          type: ' iconfont icon-bianjisekuai',
                                          size: 18
                                        }
                                      })
                                    ]
                                  )
                                ]
                              ),
                                // h("Button", {
                                //             props: {
                                //                 type: "ghost",
                                //                 size: "small"
                                //             },
                                //             class: "mr-20",
                                //             on: {
                                //                 click: () => {
                                //                 // this.showUpdateModal(params.index);
                                //                 this.showUpdateModal(params.row.id);
                                //                 }
                                //             }
                                //         },
                                //     [h("Icon", { props: { type: "edit", size: 14 } })]
                                // ),
                                
                                // h("Button", {
                                //             props: {
                                //                 type: "ghost",
                                //                 size: "small"
                                //             },
                                //             class: "",
                                //             on: {
                                //                 click: () => {
                                //                 this.delData([params.row.id]);
                                //                 }
                                //             }
                                //         },
                                // [h("Icon", { props: { type: "trash-a", size: 14 } })]
                                // )
                                h(
                                  'Tooltip',
                                  {
                                    props: {
                                      placement: 'right',
                                      content: '删除'
                                    },
                                    style: {
                                      cursor: 'pointer'
                                    }
                                  },
                                  [
                                    h(
                                      'Button',
                                      {
                                        props: {
                                          type: 'error',
                                          size: 'small'
                                        },
                                        style: {
                                          marginRight: '5px',
                                          padding: '1px 2px'
                                        },
                                        on: {
                                          click: () => {
                                            this.delData([params.row.id])
                                          }
                                        }
                                      },
                                      [
                                        h('Icon', {
                                          props: {
                                            type: ' iconfont icon-shanchusekuai',
                                            size: 18
                                          }
                                        })
                                      ]
                                    )
                                  ]
                                )
                                ]);
            }
            }
        ]
        },
            // 页面查询数据
            queryData: {
                limit: 10,
                        page: 1,
                        totalRecord: 0,
                        name: ""
            }
        };
        },
        methods: {
            // 获取列表
            getTableData() {
                const that = this;
                that.queryData.totalRecord = undefined;
                IotDeviceApi.getPageList(that.queryData)
                        .then(res => {
                    that.list.tableData = res.data.list;
                that.queryData.totalRecord = res.data.totalRecord;
                that.queryData.page = res.data.page;
                that.queryData.limit = res.data.pageSize;
            })
            .catch(error => {
                    Message.error(error);
            });
            },

            // 新建&修改
            postData() {
                const that = this;
                that.$refs["systemFrom"].validate(valid => {
                    if (valid) {
                        if (!that.modal.iotDevice.formData.id) {// 新建
                            IotDeviceApi.add(that.modal.iotDevice.formData)
                                    .then(res => {
                                that.modal.iotDevice.isShow = false;
                            that.modal.iotDevice.loading = false;
                            if (!res.code) {
                                that.getTableData();
                                that.$Notice.success({
                                    title: "保存成功!"
                                });
                            } else {
                                that.$Notice.error({
                                    title: res.message
                                });
                            }
                        })
                        .catch(error => {
                                Message.error(error);
                        });
                        } else {// 修改
                            IotDeviceApi.update(
                                    that.modal.iotDevice.formData.id,
                                    that.modal.iotDevice.formData
                            )
                                    .then(res => {
                                that.modal.iotDevice.isShow = false;
                            that.modal.iotDevice.loading = false;
                            if (!res.code) {
                                that.getTableData();
                                that.$Notice.success({
                                    title: "保存成功!"
                                });
                            } else {
                                that.$Notice.error({
                                    title: res.message
                                });
                            }
                        })
                        .catch(error => {
                                Message.error(error);
                        });
                        }
                    } else {
                        that.modal.iotDevice.loading = false;
                that.$nextTick(() => {
                    that.modal.iotDevice.loading = true;
            });
            }
            });
            },

            // 删除
            delData(ids) {
                if (!ids.length) {
                    return;
                }
                this.$Modal.confirm({
                    title: "确认删除",
                    content:
                    "<p>您确认删除id为 <strong>" +
                    ids.toString() +
                    "</strong> 的记录吗?</p><p>删除后将无法撤销，请谨慎操作！</p>",
                    loading: true,
                    onOk: () => {
                    IotDeviceApi.del({
                    ids: ids
                }).then(res => {
                    this.$Modal.remove();
                if (!res.code) {
                    this.$Notice.success({
                        title: "删除成功"
                    });
                    this.queryData.page = 1;
                    this.getTableData();
                } else {
                    this.$Notice.error({
                        title: res.message
                    });
                }
            });
            }
            });
            },

            // 排量删除
            batchDel() {
                let ids = [];
                this.list.selections.forEach(element => {
                    ids.push(element.id);
            });
                if (!ids.length) {
                    this.$Message.error({
                        content: "请先选择要删除的项！",
                        duration: 3
                    });
                }
                this.delData(ids);
            },

            // 全选，不全选
            selectionChange(args) {
                this.list.selections = args;
            },

            //每页显示记录数变更
            onPageSizeChange(pageSize) {
                this.queryData.limit = pageSize;
                this.getTableData();
            },

            // 换页
            changePage(page) {
                this.queryData.page = page;
                this.getTableData();
            },

            // 显示新建弹窗
            showCreateModal() {
                this.modal.iotDevice.type = "create";
                this.modal.iotDevice.title = "新建";
                this.modal.iotDevice.formData = {};
                this.modal.iotDevice.isShow = true;
            },

            // 显示修改弹窗
            showUpdateModal(id) {
                this.modal.iotDevice.type = "update";
                this.modal.iotDevice.title = "修改";
                //不请求后端，直接list取对象
                // this.modal.iotDevice.formData = JSON.parse(
                //   JSON.stringify(this.list.tableData)
                // )[index];
                const that = this;
                IotDeviceApi.getDetail(id).then(res => {
                    that.modal.iotDevice.formData = res.data;
            })
            .catch(error => {
                    Message.error(error);
            });
                this.modal.iotDevice.isShow = true;
            }
        },

        created() {
            this.getTableData();
        }
    };
</script>
